<html>
    <head>
        <title>渲染函数</title>
    </head>
    <body>
        <script>
              // 渲染函数
                        // 一、基础
                                  /*
                                        Vue推荐在绝大多数情况下使用模板来创建你的HTML。

                                        然而在一些场景中，你真的需要JavaScript的完全编程的能力。
                                        
                                        这时候，你可以使用 "渲染函数" ,它比模板更接近编译器！
                                  */            

                                  // 让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：
                                        /*
                                            <h1>
                                                 <a name="hello-world" href="#hello-world">
                                                    Hello world!!
                                                 </a>
                                            </h1>


                                            对于上面的HTML，你决定这样定义组件接口：

                                                <anchored-heading :level="1">Hello world! </anchored-heading>


                                            当开始写一个只能通过 level prop 动态生成标题的组件时，你可能很快想到要这样实现：
                                                
                                                <script type="text/x-template" id="anchored-heading-template">
                                                    <h1 v-if="level===1">
                                                        <slot></slot>
                                                    </h1>
                                                    <h2 v-else-if="level===2">
                                                        <slot></slot>
                                                    </h2>
                                                    <h3 v-else-if="level===3">
                                                        <slot></slot>
                                                    </h3>
                                                    <h4 v-else-if="level===4">
                                                        <slot></slot>
                                                    </h4>
                                                    <h5 v-else-if="level===5">
                                                        <slot></slot>
                                                    </h5>
                                                    <h6 v-else-if="level===6">
                                                        <slot></slot>
                                                    </h6>
                                                <-/script>
                                        */
                                                Vue.component('anchored-heading',{
                                                    template:'#anchored-heading-template',
                                                    props:{
                                                        level:{
                                                            type:Number,
                                                            required:true
                                                        }
                                                    }
                                                })

                                    /*
                                        这里用模板并不是最好的选择： 不但代码冗长，而且在每一个级别的标题中重复书写了<slot></slot>,
                                        在要插入锚点元素是还要再次重复。
                                    */

                                    /*
                                        虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。
                                        那么，我们来尝试使用"render函数"重写上面的例子：
                                    */ 
                                                Vue.component('anchored-heading',{
                                                    render:function(createElement){
                                                        return createElement(){
                                                            'h'+this.level,  //标签名称
                                                            this.$slots.default // 子节点数组 
                                                        }
                                                    },
                                                    props:{
                                                        level:{
                                                            type:Number,
                                                            required:true
                                                        }
                                                    }
                                                });

                                    /*
                                        看起来简单多了！ 这样代码精简很多，但是需要非常熟悉Vue的实例属性。
                                        在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world! 。
                                        这些子节点被存储在组件实例中的 $slots.default中。
                                        (其实就是，使用组件时，插入的标签，不再具名插槽"v-slot"声明所在插槽，就在默认插槽中)
                                    */


                // 二、节点、树以及虚拟DOM
                            /*
                                在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。
                                以下面这段HTML为例：

                                        <div>
                                            <h1>My Title</h1>
                                            Some text context
                                            --ToDo: Add tagline--
                                        </div>

                                当浏览器读到这些代码时，它会建立一个"DOM 节点"树来保持追踪所有内容，如同你会画一张家谱树来"追踪"家庭成员的发展一样。

                                每个"元素"都是一个"节点"。
                                每段文字也是一个节点。设置注释也是节点。一个节点就是页面的"一个部分"。
                                就像家谱树一样，每个节点都可以有孩子节点(也就是说每个部分可以包含其他的一些部分)。
                            */

                            /*
                                高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。
                                你只需要告诉Vue你希望页面上的HTML是什么，这可以是一个模板：
                                        
                                        <h1>{{blogTitle}}</h1>

                                或者一个渲染函数里：
                            */
                                        render:function(createElement){
                                            return createElement('h1',this.blogTitle)
                                        }

                            // 在这两种情况下， Vue都会自动保持页面的更新，即便 blogTitle 发生了变化。


                        // ★、虚拟DOM
                                    /*
                                        Vue 通过建立一个 "虚拟DOM" 来追踪自己要如何改变真实DOM。
                                    */
                                    // 请仔细看这行代码：
                                           return createElement('h1',this.blogTitle)
                                    /*
                                        createElement 到底返回什么呢？  
                                        其实不是一个实际的DOM元素。它更准确的名字可能是 createNodeDescription （创建节点的描述对象），
                                        因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信心。
                                        我们把这样的"节点描述对象"称为"虚拟节点(virtual node)",也常简写它为 "VNode".

                                        "虚拟DOM" 是我们对由 Vue组件树建立起来的整个VNode树的称呼。
                                    */
                                
                

                // 三、createElement 参数
                         
                            /*
                                接下来你需要熟悉的是如何在 createElement 函数中使用模板中的那些功能。

                                下面是 createElement 接受的参数：
                            */
                                    // @returns {VNode}
                                    createElement(
                                        // {String | Object | Function}
                                        // 一个HMTL标签名、组件选项对象，或者 resolve 了上述任何一种的async 函数。  必填项
                                        'div',

                                        // {object}
                                        // 一个与模板中 attribute 对应的数据对象。  可选项
                                        {
                                            // （详见下一节）
                                        },

                                        // 子级虚拟节点(VNodes)
                                        // {string | Array}
                                        // 子级虚拟节点(VNode),由 'createElement()'构建而成
                                        // 也可以使用字符串来生成"文本信息节点"   可选项
                                        [
                                            '先写一些文字',
                                            createElement('h1','一则头条'),
                                            createElement(MyComponent,{
                                                props:{
                                                    someProp:'foobar'
                                                }
                                            })
                                        ]
                                    );


                        // 1、深入数据对象
                                /*
                                    有一点要注意： 正如 v-bind:class 和 v-bind:style 这样的指令在模板与语法中被特别对待一样，
                                    它们在VNode数据对象中也有对应的顶层字段。该对象也允许你绑定普通的HMTL attribute(标签属性)，
                                    也许绑定如 innerHTML 这样的DOM property (这会覆盖v-html指令)
                                */

                                    // 数据对象
                                    {
                                            // 与 'v-bind:class' 的API相同，接受一个字符串、对象 或者对象组成的数组
                                            class:{
                                                foo:true,
                                                bar:false
                                            },

                                            // 与 'v-bind:style'的API相同，接受一个对象、数组，或对象数组
                                            style:{
                                                color:'red',
                                                fontSize:'14px'
                                            },

                                            //  普通的HTML attribure(标签属性)
                                            attrs:{
                                                id:'foo'
                                            },

                                            // 组件 prop
                                            props:{
                                                myProp:'bar'
                                            },

                                            // DOM property(DOM 属性)
                                            domProps:{
                                                innerHTML:'baz'
                                            },

                                            /*
                                                事件监听器
                                                在 'on' 内。
                                                但不再支持如 'v-on:keyup.enter'这样的修饰符。
                                                需要在处理函数中手动检查keyCode.
                                            */ 
                                            on:{
                                                click:this.nativeClickHandler
                                            },

                                            /*
                                                自定义指令。
                                                注意： 你无法对 'binding'钩子函数中的 oldValue参数进行赋值，因为Vue已经自动为你进行了同步！
                                            */ 
                                            directives:[
                                                {
                                                    name:'my-coustom-directive',
                                                    value:'2',
                                                    experession:'1+1',
                                                    arg:'foo',
                                                    modifiers:{
                                                        bar:true
                                                    }
                                                }
                                            ],

                                            /*
                                                作用域插槽
                                                格式为：  {name: props=> createElement('span',props.text)}
                                            */
                                            scopedSlots:{
                                                default:props=> createElement('span',props.text)
                                            },

                                            // 如果组件是其他组件的子组件，需为插槽指定名称
                                            slot:'name-of-slot',

                                            // 其他特殊顶层属性
                                            key:'myKey',
                                            ref:'myRef',
                                            /*
                                                如果你在渲染函数中给多个元素都应用了相同的 ref 名
                                                那么 '$refs.myRef'  会变成一个数组
                                            */ 

                                            refInFor:true
                                    }
                        
                    // 2、完整示例
                                // 有了这些知识，我们现在可以完成我们最开始响实现的组件
                                 
                                var getChildrenTextContent = funciton(children){
                                    return children.map(function(node){
                                        return node.children? getChildrenTextContent(node.children):node.text
                                    }).join('')
                                }

                                Vue.component('anchored-heading',{
                                    render:function(createElement){
                                        // 创建 kebab-case 风格的ID
                                        var headingId = getChildrenTextContent(this.$slots.default)
                                            .toLowerCase()
                                            .replace(/\W+/g, '-')
                                            .replace(/(^-|-$)/g, '')

                                        return createElement(
                                            'h'+this.level, // 元素标签名称
                                            [
                                                createElement('a',{
                                                    attrs:{
                                                        name:headingId,
                                                        href:'#'+headingId
                                                    }
                                                },this.$slots.default)
                                            ]
                                        )
                                    },
                                    // 组件属性声明
                                    props:{
                                        level:{
                                            type:Number,
                                            required:true
                                        }
                                    }
                                });


                    // 3、约束
                                // VNode 必须唯一
                                // 组件树中的所有VNode必须是唯一的。这意味着，下面的渲染函数是不合法的：
                                        render:function(createElement){
                                            var  myParagraphVNode = createElement('p','hi');
                                            return createElement('div',[
                                                // 错误-重复的 VNode
                                                myParagraphVNode,myParagraphVNode
                                            ])
                                        }
                                /*
                                    如果你真的需要重复很多次的元素/组件,你可以使用工厂函数来实现。

                                    例如，下面这渲染函数用完全合法的方式渲染了20个相同的段落：
                                */ 
                                       render:function(createElement){
                                           return createElement('div',
                                            Array.apply(null,{length:20}).map(function(){
                                                return createElement('p','hi')
                                            })
                                           )
                                       }

            // 四、使用JavaScript代替模板功能

                                // 1、 v-if 和 v-for
                                            /*
                                                只要再要再原生的JavaScript中可以轻松完成的操作，Vue的渲染函数就不会提供专有的替代方法。

                                                比如，在模板中使用的 v-if 和 v-for ：

                                                    <ul v-if ="items.length">
                                                        <li v-for="item in items">{{item.name}}</li>
                                                    </ul>
                                                    <p v-else></p>
                                            */

                                            // 这些都可以在渲染函数中用JavaScript的 if / else 和 map 来重写：

                                            props:['items'],
                                                    render:functionc(createElement){
                                                        if(this.items.length){
                                                            return createElement('ul',this.items.map(funciton(item){
                                                                return createElement('li',item.name );
                                                            }))
                                                        }
                                                    }



                                // 2、v-model
                                            /*
                                                渲染函数中没有与 v-model 的直接对应----你必须自己实现相应的逻辑：
                                            */
                                                    props:['value'],
                                                    render:function(createElement){
                                                        var self = this;
                                                        return createElemetn('input',{
                                                            // DOM属性绑定
                                                            domProps:{
                                                                value:self.value
                                                            },
                                                            // 事件监听器绑定
                                                            on:{
                                                                input:function(event){
                                                                    self.$emit('input',event.target.value)
                                                                }
                                                            }
                                                        })
                                                    }

                                            // 这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。


                                // 3、事件 & 按键修饰符
                                            /*
                                                对于 .parent 、 .capture 和 .once 这些事件修饰符， Vue 提供了相应的前缀可以用于 on:

                                                以下是对照表:

                                                    修饰符                 前缀
                                                    .passive               &
                                                    .capture               !
                                                    .once                  ~
                                                    .capture.once          ~!
                                                    或者 
                                                    .once.caputre
                                            */
                                            // 例如：
                                                    on:{
                                                        '!click':this.doThisInCapturingMode,
                                                        '~keyup':this.doThisOnce,
                                                        '~!mouseover':this.doThisOnceInCapturingMode
                                                    }

                                            // 对于所有其他的修饰符，私有前缀都不是必须的，因为你可以在时间处理函数中使用 "JS的事件方法"：
                                            /*
                                                    修饰符                                   处理函数中的等价操作
                                                    .stop                                   event.stopPropagation()  阻止事件冒泡
                                                    .prevent                                event.preventDefault()   阻止默认行为
                                                    .self                                   if(event.target !== event.currentTarget) return  只当事件在该元素本身触发时才触发回调
                                                    
                                                    按键：
                                                    .enter , .13                            if(!event.ctrKey) return （对于别的按键修饰符来说，可以将13改为另一个按键码）
                                                    
                                                    修饰键：
                                                    .ctrl ， .alt, .shift, .meta            if(!event.ctrlKey) return （将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey）
                                            */      
                                            
                                            // 这里是一个实用所有修饰符的例子：
                                                on: {
                                                        keyup: function (event) {
                                                            // 如果触发事件的元素不是事件绑定的元素
                                                            // 则返回
                                                            if (event.target !== event.currentTarget) return
                                                            // 如果按下去的不是 enter 键或者
                                                            // 没有同时按下 shift 键
                                                            // 则返回
                                                            if (!event.shiftKey || event.keyCode !== 13) return
                                                            // 阻止 事件冒泡
                                                            event.stopPropagation()
                                                            // 阻止该元素默认的 keyup 事件
                                                            event.preventDefault()
                                                            // ...
                                                        }
                                                }

                                // 4、插槽
                                          // 你可以通过 this.$slots 访问"静态插槽"的内容，每个插槽都是一个 VNode 数组。
                                                render:function(createElement){
                                                    // <div><slot></slot></div>
                                                    return createElement('div',this.$slots.default)
                                                }

                                          // 也可以通过this.$scopeedSlots 访问"作用域插槽"，每个作用域插槽都是一个返回"若干VNode"的函数：
                                                props:['message'],
                                                render:function(createElement){
                                                    // <div><slot :text="message"></slot></div>
                                                    return createElement('div',[
                                                        this.$scopedSlots.default({
                                                            text:this.message
                                                        });
                                                    ])
                                                }

                                          // 如果要用渲染函数向子组件中传递作用域插槽，可以利用VNode数据对象中的 scopedSlots 字段：
                                                render:function(createElement){
                                                    // <div> <child v-slot="props"> <span>{{porps.text}}</span> </child> </div>
                                                    return createElement('div',[
                                                        createElement('child',{
                                                            // 在数据云插槽中传递作用域插槽
                                                            // 格式为 {name : props =>VNode | Array<VNode>}
                                                            scopedSlots:{
                                                                default:fuction(props){
                                                                    return createElement('span',props.text)
                                                                }
                                                            }
                                                        })
                                                    ])
                                                }
                                                
                                            
                                            
        </script>
    </body>
</html>   